<template>

  <div class="login" style="color: grey">
    <br>
    <h2 style="color: grey">商洛学院就业系统管理员端</h2><br>
    <el-form :model="form" status-icon label-width="100px" class="demo-ruleForm">
      <el-form-item label="账号:" prop="user_acount">
        <el-input v-model="form.user_acount" placeholder="请输入账号" style="width:95%"></el-input>
      </el-form-item>
      <el-form-item label="密码:" prop="user_password">
        <el-input v-model="form.user_password" placeholder="请输入密码" type="password" style="width:95%"
                  oncopy="return false" onpaste="return false" oncut="return false"
                  oncontextmenu="return false"></el-input>
        <br>
      </el-form-item>
    </el-form>
    <el-button type="success" v-on:click="submit" plain>登录系统</el-button>
    <a href="http://localhost:8099/portal">
      <el-button type="success" plain>返回首页</el-button>
    </a><br><br><br>
    <br><br><br>

    <Vcode
      :show="isShow"
      @success="success"
      @close="close"
      :imgs="[Img1, Img2,Img3, Img4,Img5, Img6,Img7, Img8,Img9, Img10,]"
    />
  </div>
</template>


<script type="application/javascript">

  import Img1 from '../assets/imgCode/img1.jpg';
  import Img2 from '../assets/imgCode/img2.jpg';
  import Img3 from '../assets/imgCode/img3.jpg';
  import Img4 from '../assets/imgCode/img4.jpg';
  import Img5 from '../assets/imgCode/img5.jpg';
  import Img6 from '../assets/imgCode/img6.jpg';
  import Img7 from '../assets/imgCode/img7.jpg';
  import Img8 from '../assets/imgCode/img8.jpg';
  import Img9 from '../assets/imgCode/img9.jpg';
  import Img10 from '../assets/imgCode/img10.jpg';

  import Vcode from "vue-puzzle-vcode";

  export default {
    name: 'login',
    data() {
      return {
        form: {
          user_acount: '',
          user_password: '',
        },
        isShow: false,
        Img1,
        Img2,
        Img3,
        Img4,
        Img5,
        Img6,
        Img7,
        Img8,
        Img9,
        Img10,
      }
    },
    components: {
      Vcode
    },
    methods: {
      submit() {
        if (this.form.user_acount == null||this.form.user_acount == ''){
          alert("用户名不能为空");
          return false;
        }
        if (this.form.user_password == null||this.form.user_password == ''){
          alert("密码不能为空");
          return false;
        }
        if (this.form.user_acount != null && this.form.user_acount != '' && this.form.user_password != null && this.form.user_password != '') {
          this.isShow = true;
        }
      },
      // 用户通过了验证
      success(msg) {
        this.isShow = false; // 通过验证后，需要手动隐藏模态框
        this.userlogin();
      },
      // 用户点击遮罩层，应该关闭模态框
      close() {
        this.isShow = false;
      },
      userlogin: function () {
        this.$axios({
          url: `/api/user/managerLogin/` + "?u_acount=" + this.form.user_acount + "&u_password=" + this.form.user_password,
          method: 'get',
        }).then(response => {  // 请求成功
          console.log(response.data);
          window.sessionStorage.setItem("u_name", response.data);
          if (response.data != 'error') {
            window.location.href = "/#/index";
          } else {
            window.location.href = "/#/error";
          }

        }).catch(error => {  // 请求失败
          console.log("error:" + error);
          window.location.href = "/#/error";
        });
      },

    },
    created() {
      let that = this;
      document.onkeypress = function (e) {
        var keycode = document.all ? event.keyCode : e.which;
        if (keycode == 13) {
          that.userlogin();// 登录方法名
          return false;
        }
      };
    }
  }

</script>
<style>

  body {
    background-color: #FFF;

  }

  .login {
    background-image: linear-gradient(to top, #F8F8FF, #E6E6FA);
    width: 30%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 13%;
    box-shadow: -2px 0 3px 0px #808080,
    0 -2px 3px 0px #808080,
    0 2px 3px 0px #808080,
    2px 0 3px 0px #808080;
  }
</style>

